/**
 * Created by gek on 2016/3/21.
 */
var directives = angular.module('ngDirectives', []);

directives.directive('masonry', function ($timeout,Brief) {
  return function (scope, element, attrs) {
    var type = attrs.masonry;
    element.masonry({
      itemSelector: '.masonry-item',
      percentPosition: true
    });

    function template(doc) {
      return '<div class="masonry-item col-md-4 col-sm-6 col-xs-6 col-xxs-12">' +
        '<div class="fh5co-post">' +
        '<div class="fh5co-post-image announce-img">' +
        '<div class="fh5co-overlay"></div>' +
        '<div class="fh5co-category"><a href="#">' + doc.tip + '</a></div>' +
        '<img src=" ' + doc.image + '" alt="Image" class="img-responsive">' +
        '</div>' +
        '<div class="fh5co-post-text">' +
        '<h3><a href="#">' + doc.title + '</a></h3>' +

        '<p>' + doc.content + '</p>' +
        '</div>' +
        '<div class="fh5co-post-meta">' +
        '<a href="#"><i class="icon-chat"></i>' + doc.author + '</a>' +
        '<a href="#"><i class="icon-clock2"></i>' + doc.time + '</a>' +
        '</div> </div> </div>'
    }

    function adminTemplate(doc){
      return '<div class="masonry-item col-md-4 col-sm-6 col-xs-6 col-xxs-12">' +
        '<div class="fh5co-post">' +
        '<div class="fh5co-post-image announce-img">' +
        '<div class="fh5co-overlay"></div>' +
        '<div class="fh5co-category"><a href="#">' + doc.tip + '</a></div>' +
        '<img src="' + doc.image + '" alt="Image" class="img-responsive">' +
        '</div>' +
        '<div class="fh5co-post-text">' +
        '<h3><a href="#">' + doc.title + '</a></h3>' +
        '<p>' + doc.content + '</p>' +
        '</div>' +
        '<div class="fh5co-post-meta">' +
        '<button type="button" class="btn btn-default toTop" value="'+doc.id+'" >置顶</button><button id="remove" type="button" class="btn btn-default remove" value="'+doc.id+'">删除</button>'+
        '<a href="#"><i class="icon-chat"></i>' + doc.author + '</a>' +
        '<a href="#"><i class="icon-clock2"></i>' + doc.time + '</a>' +
        '</div> </div> </div>'
    }

    //获取远程第一页数据
    //TODO:获取数据
    var docs = [{
      id:'1',
      tip: '服务点',
      image: '../res/images/wuchang.jpg',
      title: '八点到在武昌区新增近5个租车点',
      content: '经过市场人员的辛勤努力，我们新增的服务点分别为东湖路，螃蟹甲，小梅园，省博物馆，梨园路，武昌的小伙伴以后观湖游园再也不用挤来挤去！',
      author: '“八点到”小管家',
      time: '2016-3-5',
      isTop: true
    }, {
      id:'2',
      tip: '加盟商',
      image: '../res/images/wuchang.jpg',
      title: '简单OA管理系统',
      content: '简单OA管理系统简单OA管理系统简单OA管理系统简单OA管理系统简单OA管理系统',
      author: '“八点到”老管家',
      time: '2016-3-5',
      isTop: false
    }];

    function appendItems() {
      var $items = '';
      if(type ==1){
        $items = $(docs.map(adminTemplate).join(''));
        $items.find('.toTop').click(function () {
          alert($(this).val());
        });
        $items.find('.remove').click(function () {
          alert($(this).val());
          $(this).parent().parent().remove();
          appendItems();
        });
      } else {
        $items = $(docs.map(template).join(''));
      }
      $items.imagesLoaded(function () {
        element.append($items).masonry('appended', $items).masonry();
      });
    }

    function loadMore() {
      var h = $(document).height() - $(window).height() - $(document).scrollTop();
      if (h <= 100) {
        //TODO:加载数据
        appendItems();
      }
    }

    element.on('layoutComplete', loadMore);
    $(window).scroll(loadMore);
    $timeout(loadMore);
  }
});

directives.directive('main', function () {
  'use strict';

  // iPad and iPod detection
  var isiPad = function () {
    return (navigator.platform.indexOf("iPad") != -1);
  };

  var isiPhone = function () {
    return (
      (navigator.platform.indexOf("iPhone") != -1) ||
      (navigator.platform.indexOf("iPod") != -1)
    );
  };

  // Full height
  var fullHeight = function () {
    if (!isiPhone() || !isiPad()) {
      $('.js-full-height').css('height', $(window).height());
      $(window).resize(function () {
        $('.js-full-height').css('height', $(window).height());
      });
    }
  };

  // Scroll Next
  var ScrollNext = function () {
    $('body').on('click', '.scroll-btn', function (e) {
      e.preventDefault();

      $('html, body').animate({
        scrollTop: $($(this).closest('[data-next="yes"]').next()).offset().top
      }, 1000, 'easeInOutExpo');
      return false;
    });
  };

  // Parallax
  var parallax = function () {
    $(window).stellar();
  };

  // Counter
  var counter = function () {
    $('.fh5co-counter-style-1').waypoint(function (direction) {
      var el = $(this.element).attr('class');
      if (direction === 'down' && !$(this.element).hasClass('animated')) {
        setTimeout(function () {
          // console.log($(this.element));
          $('.' + el).find('.js-counter').countTo({
            formatter: function (value, options) {
              return value.toFixed(options.decimals);
            },
          });
        }, 200);

        $(this.element).addClass('animated');

      }
    }, {offset: '75%'});


    $('.fh5co-counter-style-2').waypoint(function (direction) {
      var el = $(this.element).attr('class');
      if (direction === 'down' && !$(this.element).hasClass('animated')) {
        setTimeout(function () {
          $('.' + el).find('.js-counter').countTo({
            formatter: function (value, options) {
              return value.toFixed(options.decimals);
            },
          });
        }, 200);

        $(this.element).addClass('animated');

      }
    }, {offset: '75%'});
  };

  // Click outside of offcanvass
  var mobileMenuOutsideClick = function () {
    $(document).click(function (e) {
      var container = $("#fh5co-offcanvass, .js-fh5co-mobile-toggle");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        $('html').removeClass('mobile-menu-expanded');
        $('.js-fh5co-mobile-toggle').removeClass('active');
      }
    });
  };

  // Burger Menu
  var burgerMenu = function () {

    $('body').on('click', '.js-fh5co-nav-toggle', function (event) {
      if ($('#navbar').is(':visible')) {
        $(this).removeClass('active');
      } else {
        $(this).addClass('active');
      }
      event.preventDefault();
    });

  };

  // Off Canvass
  var offCanvass = function () {

    if ($('#fh5co-offcanvass').length == 0) {
      if ($('.fh5co-nav-style-1').length > 0) {
        $('body').prepend('<div id="fh5co-offcanvass" />');

        $('.fh5co-link-wrap').each(function () {
          $('#fh5co-offcanvass').append($(this).find('[data-offcanvass="yes"]').clone());
        })
        $('#fh5co-offcanvass').find('.js-fh5co-mobile-toggle').remove();
        $('#fh5co-offcanvass, #fh5co-page').addClass($('.fh5co-nav-style-1').data('offcanvass-position'));
        $('#fh5co-offcanvass').addClass('offcanvass-nav-style-1');
      }

      if ($('.fh5co-nav-style-2').length > 0) {
        $('body').prepend('<div id="fh5co-offcanvass" />');

        $('.fh5co-link-wrap').each(function () {
          $('#fh5co-offcanvass').append($(this).find('[data-offcanvass="yes"]').clone());
        })
        $('#fh5co-offcanvass').find('.js-fh5co-mobile-toggle').remove();
        $('#fh5co-offcanvass, #fh5co-page').addClass($('.fh5co-nav-style-2').data('offcanvass-position'));
        $('#fh5co-offcanvass').addClass('offcanvass-nav-style-2');
      }
    }

    $('body').on('click', '.js-fh5co-mobile-toggle', function (e) {
      var $this = $(this);
      $this.toggleClass('active');
      $('html').toggleClass('mobile-menu-expanded');

    });

    if ($(window).width() < 769) {
      $('body, html').addClass('fh5co-overflow');
    }

    $(window).resize(function () {
      if ($(window).width() < 769) {
        $('body, html').addClass('fh5co-overflow');
      }
      if ($(window).width() > 767) {
        if ($('html').hasClass('mobile-menu-expanded')) {
          $('.js-fh5co-mobile-toggle').removeClass('active');
          $('html').removeClass('mobile-menu-expanded');
        }
      }
    });

  };


  // Magnific Popup

  var imagePopup = function () {
    $('.image-popup').magnificPopup({
      type: 'image',
      removalDelay: 10,
      titleSrc: 'title',
      gallery: {
        enabled: false
      }
    });
  };

  new WOW().init();

  return function (scope, element, attrs) {

    setTimeout(function () {
      element.imagesLoaded(function () {
        $('#spinner').fadeOut();
        parallax();
        fullHeight();
        ScrollNext();
        counter();
        mobileMenuOutsideClick();
        burgerMenu();
        imagePopup();
        offCanvass();
      });
    });
  }
});

directives.directive('navScroll', function () {
  return function (scope, element, attrs) {
    element.click(function () {
      var id = attrs.navScroll;
      var height = 0;
      if (id == '1') {
        height = $('#big-bg').height() + $('#characteristic').height() + 80;
      } else if (id == '2') {
        height = $('#big-bg').height() + $('#characteristic').height() + $('#announce').height() + 310;
      } else if (id == '3') {
        height = $('#big-bg').height() + $('#characteristic').height() + $('#announce').height() + $('#big-bg-2').height() + 480;
      } else if (id == '4') {
        height = $('#big-bg').height() + $('#characteristic').height() + $('#announce').height() + $('#big-bg-2').height() + $('#help').height() + 665;
      }
      $('window,body').animate({scrollTop: height}, 1200);
    });
  }
});






